<template>
  <div class="handle">
    <Tooltip class="tooltip" content="点赞" placement="left">
          <div @click="handleClick('1')">
            <Icon size="30" type="ios-thumbs-up" />
          {{ likeNum_bak }}
          </div>
    </Tooltip>
    <Tooltip class="tooltip" content="留言" placement="left">
          <a href="#message">
            <div @click="handleClick('2')">
              <Icon size="30" type="ios-text" />
            {{ remarkNum_bak }}
            </div>
          </a>
    </Tooltip>
    <Tooltip class="tooltip" content="分享" placement="left">
          <div @click="handleClick('3')">
            <Icon size="30" type="ios-paper-plane" />
          </div>
    </Tooltip>
    <Tooltip class="tooltip" content="回到顶部" placement="left">
      <a href="#view-blog-top">
        <div @click="handleClick('4')">
          <Icon size="30" type="ios-arrow-dropup-circle" />
        </div>
      </a>
    </Tooltip>
  </div>
</template>

<script>
import { like } from '@/api/blog.js';
export default {
  name: 'handle',
  props: {
    id: {
      type: [String, Number],
      default: ''
    },
    likeNum: {
      type: Number,
      default: 0
    },
    remarkNum: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      likeNum_bak: this.likeNum,
      remarkNum_bak: this.remarkNum
    }
  },
  methods: {
    handleClick(active) {
      switch (active) {
        case '1':
          like({ id: this.id }).then(res => {
            if(res.status === 200 && res.data.code === 0) {
              this.likeNum_bak += 1
            }
          })
          break;
        case '2':
          // this.$emit('click-message')
          break;
        case '3':
          
          break;
        case '4':
          
          break;
        default:
          break;
      }
    }
  },
}
</script>

<style lang="less" scoped>
.handle {
  width: 50px;
  display: flex;
  flex-direction: column;
  justify-items: center;
  .tooltip {
    cursor: pointer;
  }
  a {
    color: #fff;
  }
}
</style>